<template>
    <section class="watchSection">
        <layout :isVertical="true" style="position: relative;">
            <span  @click="back" style="position: absolute;font-size: 20px;font-weight: 700;left: 50px;top: 20px;z-index: 999;cursor: pointer;">{{worko.workOrderType==1?'工单列表 > 人工创单工单详情':'工单列表 > 自动创单工单详情'}}</span>
            <common-toolbar text="">
                <el-button class="btn commonButton" v-if="worko.state==1" type="success" style="background: #67C23A !important;border-color: #67C23A;">处理中</el-button>
                <el-button class="btn commonButton" v-else-if="worko.state==2" type="success" style="background: #67C23A !important;border-color: #67C23A;">已处理</el-button>
                <el-button class="btn commonButton" v-else-if="worko.state==4" type="success" style="background: #67C23A !important;border-color: #67C23A;">挂单</el-button>

                <el-button class="btn commonButton" v-else type="warning" style="background: orange !important;border-color: orange;">待响应</el-button>
            </common-toolbar>
            <layout layout="center"  class="centerSection noScrollSection">
                <el-form ref="ruleForm" :model="worko" label-width="140px" :rules="rules">
            <div class="leftData" style="display: inline-flex;width: 100%;">
                <el-form-item label="工单ID:">
                    {{worko.businessId}}
                </el-form-item>
                <el-form-item label="工单类型:">
                    <span v-if="worko.workOrderType==1"> 人工创单</span>
                    <span v-else> 自动创单</span>

                </el-form-item>
               
            </div>
            <div class="leftData" style="display: inline-flex;width: 100%;">
                <el-form-item label="影院名称:">
                    {{worko.cinemaName}}
                </el-form-item>
                <el-form-item label="专资编码:">
                    {{worko.cinemaCode}}
                </el-form-item>
               
            </div>
            <div class="leftData" style="display: inline-flex;width: 100%;">
                <el-form-item label="创建人" >
                    {{worko.createUserName}}
                    <!-- <el-input v-model="worko.createUserName"  placeholder="请输入联系人" disabled></el-input> -->
                </el-form-item>
                <el-form-item label="创单时间">
                    {{worko.createTime}}
                    <!-- <el-input v-model="worko.createTime"  placeholder="请输入联系方式" disabled maxlength="11"></el-input>
                     -->
                </el-form-item>
               
            </div>
            <div class="leftData" style="display: inline-flex;width: 100%;">

                <el-form-item label="联系人" prop="linkman">
                    <el-input v-model="worko.linkman"  placeholder="请输入联系人"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                    <el-input v-model="worko.phone"  placeholder="请输入联系方式" maxlength="11"></el-input>
                </el-form-item>
               
            </div>
             <div class="leftData" style="display: inline-flex;width: 100%;">
            <el-form-item label="故障影厅" prop="hallId">
                <!-- {{worko}} -->
                <el-select v-model="worko.hallId" placeholder="请选择故障影厅"  :disabled="worko.workOrderType==1?false:true" @change="changeSelect">
                         <el-option
                    v-for="item in user2"
                    :key="item.id"
                    :label="item.tmsHallName"
                    :value="getValue(item)">
                    </el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="故障设备" prop="deviceId">
                <el-select v-model="worko.deviceId" placeholder="请选择故障设备" :disabled="worko.workOrderType==1?false:true" @change="changeSelectdDevice">
                        <el-option
                    v-for="item in user1"
                    :key="item.deviceId"
                    :label="getLabel(item)"
                    :value="item.deviceId">
                    
                    </el-option>
                    </el-select>
            </el-form-item>
             </div>
            <el-form-item label="故障详情" style="margin-top:10px;">
                {{worko.faultDetails}}
                <!-- <el-input v-model="worko.faultDetails" placeholder="请输入故障详情" type="textarea" disabled></el-input> -->
            </el-form-item>
            <el-form-item label="处理详情" prop="disposeDetails" style="margin-top:10px;">
                <el-input v-model="worko.disposeDetails" placeholder="请输入处理详情" type="textarea" maxlength="200"  show-word-limit></el-input>
            </el-form-item>
            <div class="leftData" style="display: inline-flex;width: 100%;">
                <el-form-item label="调整工单状态">
                    <el-select v-model="worko.state" placeholder="请选择故障影厅" @change="changeSelectCinema">
                   <el-option
                    v-for="item in user3"
                    :key="item.codeId"
                    :label="item.codeValue"
                    :value="item.codeId">
                    
                    </el-option>
                    </el-select><i class="el-icon-setting" @click="dialogVisibleFlase" v-if="worko.workOrderType==2&&worko.state!=2" ></i>
                </el-form-item>
                <el-form-item label="">
                    <a href="javascript:void(0);" @click="dialogVisible1True(worko)">查看工单操作日志</a>
                </el-form-item>
               
            </div>
             <el-form-item style="margin-top:22px">
                <el-button type="primary" @click="workOrderSave('ruleForm')">保存</el-button>
            </el-form-item>
</el-form>
        
            </layout>
        </layout>
        <el-dialog
                title="设置自动关单时间（仅针对本单）"
                :visible.sync="dialogVisible"
                width="30%"  :modal="false">
            <div>
                 <el-date-picker
                v-model="worko.predictOffTime"
                type="datetime"
                placeholder="选择日期时间">
                </el-date-picker>
            </div>
            <span slot="footer" class="dialog-footer" style="padding:10px;">
                <el-button class="btn commonButton" @click="dialogVisibleFlase1">取 消</el-button>
                <el-button class="btn commonButton" type="default" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
         <el-dialog
                title="工单操作日志"
                :visible.sync="dialogVisible1"
                width="50%"  :modal="false">
                <div style="height: 100%;overflow-y: auto;">
                    <p style="margin: 10px;line-height: 20px;" v-for="(item,index) in dataList" :key="index">{{index + 1}}.操作时间：{{item.logTime}}；操作人：{{item.logUserName}}，操作：{{item.logMessage}}；</p>
                </div>

        </el-dialog>
    </section>
</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import Service from './showStatusWatch.service';
import {JSEncrypt} from 'jsencrypt';
import base from '@/scrollLoad';
import moment from 'moment';
import {
  checkMail,
  checkPhone,
} from "@/utils/validate";

let workoRderCreatDetails = JSON.parse(window.localStorage.getItem('workoRderCreatDetails'))
export default {
    data() {
            return {
                height : 500,
    windowHeight : 700,
    loading : false,
    data: [],
    onlyShowError : false,
    total: 0,
    page:1,
    pageSize : 30,
    cinemaName:'',
    cinemaCode:'',
    value1:'',
    dialogVisible:false,
    dialogVisible1: false,
    user3:[],
    user2:[],
    user1:[],
rules:{
          disposeDetails: [
            { required: true, message: '请输入处理详情', trigger: 'blur' }
          ],
          holderCode: [
            { required: true, message: '请选择对应广告商', trigger: 'change' }
          ],
          linkman: [
            { required: true, message: '请输入联系人', trigger: 'blur' }
          ],
          phone: [
            {required: true, message: '请输入有效的联系方式', trigger: 'blur' },
            //  { validator: checkPhone, trigger: "blur" },
          ],
          email:[{
          required: true,
          message: '请输入邮箱',
          trigger: 'blur',
        },{ validator: checkMail, trigger: "blur" },],
          adminUsername: [
            { required: true, message: '请输入管理员用户名', trigger: 'blur' }
          ],
          adminPassword: [
            { required: true, message: '请输入管理员密码', trigger: 'blur' }
          ]
      },
    form : {
        name: '',
        code: '',
        date : ''
    },
    worko:{},
    workoList:{},
    options:[],
    input:null,
    hallName:{},
    deviceName:{},
    cinemaNameData:{},
    predictOffTime:'',
    dataList:[],
    hallId:null,
    tmsHallName:null,
    workoRderCreatDetails:{},
            };
        },
        // computed :{
        //     ...mapState([
        //         "id",
        //         "address"
        //     ]),
        //     ...mapGetters([
        //         "GET_NAME",
        //         "GET_ID"
        //     ]),
        // },
        props:['workoName'],
        methods: {
             // 序号
    indexMethod(index) {
    return (this.page - 1) * this.pageSize + index + 1;
    },
     dialogVisibleFlase() {
        this.dialogVisible = true;
        // this.worko.predictOffTime =''
        // this.worko.predictOffTime =this.workoList.predictOffTime
    },
    dialogVisibleFlase1() {
        this.dialogVisible = false;
        this.worko.predictOffTime =''
        this.worko.predictOffTime =this.workoList.predictOffTime
    },
    searchErrorList(){
        this.onlyShowError = true;
        this.searchList();
    },
    back() {
        // this.$router.go(-1);
        this.$router.push({
            path:'/watch/workoRder',
            name:'工单列表',
            params: { userId: 123 }
        });  
    },
    searchAllList(){
        this.onlyShowError = false;
        this.searchList();
    },
    getValue(item) {
        if(this.worko.hallId == item.id ||this.worko.hallId == item.tmsHallName) {
            this.tmsHallName = item.tmsHallName;
            this.hallId= item.id;
            return item.tmsHallName
        }
        // `${item.id}|${item.tmsHallName}`
        return item.tmsHallName
    },
    getLabel(item) {
        if(item.deviceTypeName !=null && item.deviceCatName !=null&&item.deviceSn!=null&&item.deviceTypeName !='' && item.deviceCatName !=''&&item.deviceSn!='') {
            return item.deviceTypeName +'/'+ item.deviceCatName +'/' +item.deviceSn
        } else if(item.deviceTypeName != ''&&item.deviceTypeName != null) {
            return item.deviceTypeName
        } else if(item.deviceCatName !=''&&item.deviceCatName != null) {
            return item.deviceCatName
        }else  {
            return item.deviceSn
        }
    },
    getState(row) {
       if(row == 1) {
            return '人工创单';
        } else if (row == 2) {
            return '自动创单';
        }
    },
    dialogVisible1True(row){
        this.dialogVisible1 = true;
        if(row.id ==undefined) {
            return;
        }
        // Service.selectLog(row.id).then(res=>{
        //     if(res.data.succeeded) {
        //         this.dataList = res.data.data;
        //     } else {
        //         this['$message']({
        //             message: res.data.errorMessage,
        //             type: 'error'
        //         });
        //     }
        // })
    },
    selectLog() {
        Service.selectLog(this.workoName.id).then(res=>{
            if(res.data.succeeded) {
                this.dataList = res.data.data;
            } else {
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
            }
        })
    },
    searchList(){
        let params = {
            page: this.page,
            pageSize: this.pageSize,
            status: 0,
            cinemaName: this.cinemaName,
            cinemaCode: this.cinemaCode,
        }

        this.data = [];
        let list = [];
        // for(let i=0;i<30;i++){
        //     list.push({
        //         id: i,
        //         name : '影厅名称' + i,
        //         cinemaName : (i+1)+'号厅' ,
        //         movie: 'ShengXiaWeiLai-2D_185_JP_115M_PTH_51_0721',
        //         totalTime: '02:00:54',
        //         playDate: '2021-11-18',
        //         playTime: '08:00~10:00',
        //     });
        // }

        this.data = list;

        this.total = this.data.length;
    },
        codeListByType() {
            let state = 'state'
            Service.codeListByType(state).then(res=>{
               if(res.data.succeeded){
                    this.user3 = res.data.data
                }else{
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                }
            })
        },
    handleSizeChange(val) {
        this.pageSize = val;
        this.searchList();
    },

    handleCurrentChange(val) {
        this.page = val;
        this.searchList();
    },

    showDetail(){

    },
    changeSelect(vaule) {
        // var [subjectId,name] = vaule.split('|');
        this.worko.hallId = vaule;
        let hallId = null
        // this.hallId = subjectId;
        this.user2.forEach((val)=>{
        if(val.id==this.hallId){
            this.hallName=val;
        }
        if(val.tmsHallName==vaule){
           return hallId=val.id;
        }
        })
        this.user1=[]
        Service.deviceGetList(hallId).then(res=>{
            if(res.data.succeeded){
                this.worko.deviceId = ''
                this.user1 = res.data.data
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
            }
        })
    },
     changeSelectdDevice(vaule) {
        this.user1.forEach((val)=>{
        if(val.deviceId==vaule){
            this.deviceName=val;
        }
        })
    },
     changeSelectCinema(vaule) {
        this.user3.forEach((val)=>{
        if(val.id==vaule){
            this.cinemaNameData=val;
        }
        })
    },
    workOrderSave(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              this.worko.hallId =this.hallId
            this.$set(this.worko,'hallName',this.tmsHallName)
            this.$set(this.worko,'deviceName',this.deviceName.deviceTypeName+this.deviceName.deviceCatName)
            this.$set(this.worko,'cinemName',this.cinemaNameData.codeValue)
            this.$set(this.worko,'predictOffTime',(this.worko.predictOffTime == ''||this.worko.predictOffTime == null) ? '' :moment(this.worko.predictOffTime).format('YYYY-MM-DD HH:mm:ss'))
            Service.workOrderSave(this.worko).then(res=>{
                if(res.data.succeeded) {
                    this['$message']({
                        message: '保存成功',
                        type: 'success'
                    });
                    // this.back()
                    this.$emit('dialogVisibleAutoClick',false)
                } else {
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                }
            })
          } else {
            return false;
          }
        });
    
        
    },
    workOrderById() {
        let worko = {}
        let me = this;
        Service.workOrderById(me.workoName.id).then(respose=>{
            if(respose.data.succeeded) {
                worko = respose.data.data
                this.workoList = JSON.parse(JSON.stringify(respose.data.data))
                this.selectLog()
                 Service.hallGetList(me.workoName.cinemaCode).then(res=>{
                    if(res.data.succeeded){
                        me.user2 = res.data.data
                        
                        Service.deviceGetList(me.workoName.hallId==undefined?me.workoName.workOrderEntity.hallId:me.workoName.hallId).then(resData=>{
                            if(resData.data.succeeded){
                                me.user1 = resData.data.data;
                                for(let item of res.data.data) {
                                    if(item.id==me.workoName.hallId) {
                                        worko.hallId = item.tmsHallName
                                    } 
                                }
                                me.worko = worko
                            }else{
                                me['$message']({
                                    message: resData.data.errorMessage,
                                    type: 'error'
                                });
                            }
                        })
                    }else{
                        me['$message']({
                            message: res.data.errorMessage,
                            type: 'error'
                        });
                    }
                })
            } else {
                me['$message']({
                    message: respose.data.errorMessage,
                    type: 'error'
                });
            }
        })
    },
    // getList() {
    //     Service.hallGetList(this.workoName.cinemaCode).then(res=>{
    //         if(res.data.succeeded){
    //             this.user2 = res.data.data
    //             //console.log(this.workoName.hallId)
    //              for(let item of res.data.data) {
    //                 // if(this.workoName.hallId==undefined) {
    //                     if(item.id==this.workoName.hallId) {
    //                         this.worko.hallId = item.tmsHallName
    //                     } 
    //                 // }else{
    //                 //     if(item.id==this.workoName.hallId) {
    //                 //         return this.worko.hallId = item.tmsHallName
    //                 //     }
    //                 // }
    //             }
    //         }else{
    //             this['$message']({
    //                 message: res.data.errorMessage,
    //                 type: 'error'
    //             });
    //         }
    //     })
    // },
    deviceGetList() {
        let me = this;
        Service.deviceGetList(this.workoName.hallId==undefined?this.workoName.workOrderEntity.hallId:this.workoName.hallId).then(res=>{
            if(res.data.succeeded){
                me.user1 = res.data.data;
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
            }
        })
    },
    dateFormat(date){
        return moment(date).format("YYYY-MM-DD,H:m:s");
    },

    resizeEvent(){
        this.windowHeight = document.documentElement.clientHeight;
        this.height = this.windowHeight - 210;
    }
        },
    created(){
        const me = this;
        // var workoRderCreatDetails = JSON.parse(window.localStorage.getItem('workoRderCreatDetails'))
        // me.workoName = workoRderCreatDetails
        this.resizeEvent();
        this.searchList();
        this.workOrderById();
        this.codeListByType();
        // this.getList();
        this.deviceGetList();
        // this.selectLog();
        window.onresize = () => {
            return (() => {
                me.resizeEvent();
            })()
        };
    },
    mounted() {

    }
}

</script>
<style lang="scss" scoped>
    @import '../../styles/login.scss';
.el-row {
    line-height: 40px;
    margin: 10px;
}
.bg-purple {
    text-align: center;
}
.el-select {
    width: 90%;
}
.p {
    font-family: SourceHanSansSC;
    font-weight: 700;
    font-size: 18px;
    color: rgba(25, 39, 48, 0.57);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 26px;
    text-decoration: none;
    margin-left: 92px;
}
.el-col-12 {
    text-align: center;
}
/deep/ .el-divider--horizontal{
    margin: 10px 0;
}
/deep/ .el-icon-setting {
    font-size: 20px;
    margin-left: 10px;
    color: rgb(87, 143, 242);
}
/deep/ .el-dialog {
    height: 300px;
}
.leftData {
    width: 100%;
    /deep/
    .el-form-item {
        width: 50%;
    }
}
/deep/ .v-modal{
    z-index: 999 !important;
}
</style>